<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2022-05-30 09:33:18
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-08-04 15:23:40
-->

<template>
  <div class="base-container">
    <img src="@/assets/img/login/login_bg.svg" class="right-logo" />
    <div class="left-section">
      <div class="left-section-main-container">
        <tenant-select></tenant-select>
      </div>
    </div>
  </div>
</template>
<script>
import TenantSelect from './components/TenantSelect'
import { getUserClients, getPortalsInOtherTenant } from '@/saas/api'
import { reloadClientConfig } from '@/saas/util'
import { IS_SAAS_MODE } from '@/store/Getter/getterTypes.js'
import { isJSON } from '@/utils/util'
import { matchTimestampToFormat } from '@/utils/timezone'
import { Message } from 'fawkes-lib'
import Vue from 'vue'
import store from '@/store'

export default {
  name: 'Tenant',
  components: {
    TenantSelect
  },
  data() {
    return {}
  },
  computed: {},
  mounted() {},
  methods: {},
  /**
   * @description: 进入租户选择页前进行判断
   *               用户拥有多可用租户时进入租户选择页面
   *               用户只拥有一个可用租户时获取门户信息，门户可用时直接进入该租户首页，否则停留在租户选择页面
   */
  beforeRouteEnter(to, from, next) {
    let isSaasMode = store.getters[IS_SAAS_MODE]
    if (!isSaasMode) {
      next(false)
      Vue.prototype.redirectTo()
      return
    }

    let tenantConfig = {}

    let getMultiPortal = function (tenant) {
      let additionalInformation = {}
      if (
        tenant.hasOwnProperty('additionalInformation') &&
        tenant.additionalInformation != 'null' &&
        isJSON(tenant.additionalInformation)
      ) {
        additionalInformation = JSON.parse(
          matchTimestampToFormat(tenant.additionalInformation)
        )
      } else if (
        tenant.hasOwnProperty('additionalInformation') &&
        tenant.additionalInformation instanceof Object
      ) {
        additionalInformation = JSON.parse(
          JSON.stringify(tenant.additionalInformation)
        )
      }

      let advancedConfig = additionalInformation?.advancedConfig || {}

      return advancedConfig.multiPortal
    }

    getUserClients()
      //可用租户个数
      .then((res) => {
        let tenantList = res.data

        switch (isSaasMode) {
          case 'main':
            tenantList = tenantList.filter((item) => item.clientId == 'fawkes')
            break
          default:
            tenantList = tenantList.filter((item) => item.clientId != 'fawkes')
        }

        //只有一个应用时去获取可用的门户
        if (tenantList.length == 1) {
          return Promise.resolve(tenantList[0])
        }

        next()
        return Promise.reject(true)
      })
      //单租户时是否多门户
      .then((tenant = {}) => {
        let multiPortal = getMultiPortal(tenant)

        let { tenantId, clientId, clientSecret } = tenant
        tenantConfig = { tenantId, clientId, clientSecret }

        if (!multiPortal) {
          next(false)
          reloadClientConfig(tenantConfig)
          return Promise.reject(true)
        }

        return getPortalsInOtherTenant(tenantConfig)
      })
      //单组户多门户时可用门户个数
      .then((res) => {
        let portalList = res.data

        if (portalList.length <= 0) {
          Message({
            type: 'warning',
            message: store.state?.language?.Global?.NO_PORTAL_PERMISSION
          })
          next()
          return Promise.reject(true)
        }

        next(false)
        reloadClientConfig(tenantConfig)
        return
      })
      .catch((e) => {
        if (e === true) {
          return
        }
        next()
      })
  }
}
</script>
<style lang="scss" scoped>
.base-container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.right-logo {
  position: absolute;
  top: 8%;
  right: 8%;
  display: none;
  width: 36%;
  height: 80%;
}

.left-section {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  &-main-container {
    width: 337px;
    margin: 0 auto;
  }
}

@media (min-width: 1280px) {
  .left-section {
    width: 60% !important;
  }

  .right-logo {
    display: block;
  }
}
</style>
